Draggable Connections Examples
This is a list of examples of how to use jsPlumb to create Connections using drag and drop. The basic procedure is:
- Create Endpoints and register them on elements in your UI, or create a source Endpoint and then make some element a drop target
- Drag and Drop
There are plenty of options you can set when doing this...it will be easier to show you some examples:
Define an Endpoint with default appearance, that is both a source and target of new Connections:
var endpointOptions = { isSource:true, isTarget:true };
Register that Endpoint on window3, specifying that it should be located in the top center of the element:
var window3Endpoint = jsPlumb.addEndpoint('window3', { anchor:"TopCenter" }, endpointOptions );
Notice here the usage of the three-argument addEndpoint - we can reuseendpointOptions
with a different Anchor for another element. This is a useful practice to get into.Register that Endpoint on window4, specifying that it should be located in the bottom center of the element:
var window4Endpoint = jsPlumb.addEndpoint('window4', { anchor:"BottomCenter" }, endpointOptions );
Now we have two Endpoints, both of which support drag and drop of new Connections. We can use these to make a programmatic Connection, too, though:Connect window3 to window4 with a 25px wide yellow Bezier that has a 'curviness' of 175:
jsPlumb.connect({ source:window3Endpoint, target:window4Endpoint, connector: [ "Bezier", { curviness:175 } ], paintStyle:{ lineWidth:25, strokeStyle:'yellow' } });
Define an Endpoint that creates Connections that are 20px wide straight lines, that is both a source and target of new Connections, and that has a
scope
ofblueline
. Also, this Endpoint mandates that once it is full, Connections can no longer be dragged from it (even ifreattach
is specified on a Connection):var endpointOptions = { isSource:true, isTarget:true, connector : "Straight", connectorStyle: { lineWidth:20, strokeStyle:'blue' }, scope:"blueline", dragAllowedWhenFull:false };
Define an Endpoint that will be anchored to
TopCenter
. It creates Connections that are 20px wide straight lines, that are both a source and target of new Connections, and that have ascope
ofblueline
. Also, this Endpoint mandates that once it is full, Connections can no longer be dragged from it (even ifreattach
is specified on a Connection):var endpointOptions = { anchor:"Top", isSource:true, isTarget:true, connector : "Straight", connectorStyle: { lineWidth:20, strokeStyle:'blue' }, scope:"blueline", dragAllowedWhenFull:false };
Define an Endpoint that will create a dynamic anchor which can be positioned at
TopCenter
orBottomCenter
. It creates Connections that are 20px wide straight lines, it is both a source and target of new Connections, and it has a 'scope' of 'blueline'. Also, this Endpoint mandates that once it is full, Connections can no longer be dragged from it (even ifreattach
is specified on a Connection):var endpointOptions = { anchor:[ "TopCenter", "BottomCenter" ], isSource:true, isTarget:true, connector : "Straight", connectorStyle: { lineWidth:20, strokeStyle:'blue' }, scope:"blueline", dragAllowedWhenFull:false };
Exactly the same as before, but shows how you can use
anchors
instead ofanchor
, if that makes you feel happier:var endpointOptions = { anchors:[ "TopCenter", "BottomCenter" ], isSource:true, isTarget:true, connector : "Straight", connectorStyle: { lineWidth:20, strokeStyle:'blue' }, scope:"blueline", dragAllowedWhenFull:false };
Define an Endpoint that is a 30px blue dot, creates Connections that are 20px wide straight lines, is both a source and target of new Connections, has a
scope
ofblueline
, and has an event handler that pops up an alert on drop (note: the event handler name means this example is jQuery - MooTools and YUI3 use different event handler names):var endpointOptions = { isSource:true, isTarget:true, endpoint: [ "Dot", { radius:30 } ], style:{fillStyle:'blue'}, connector : "Straight", connectorStyle: { lineWidth:20, strokeStyle:'blue' }, scope:"blueline", dropOptions:{ drop:function(e, ui) { alert('drop!'); } } };
Same example as before, but this is for MooTools, and the Endpoint can support up to 5 connections (the default is 1):
var endpointOptions = { isSource:true, isTarget:true, endpoint: [ "Dot", { radius:30 } ], style:{ fillStyle:'blue' }, maxConnections:5, connector : "Straight", connectorStyle: { lineWidth:20, strokeStyle:'blue' }, scope:"blueline", dropOptions:{ onDrop:function(e, ui) { alert('drop!'); } } };
Same example again, but
maxConnections
being set to -1 means that the Endpoint has no maximum limit of Connections:var endpointOptions = { isSource:true, isTarget:true, endpoint: [ "Dot", {radius:30} ], style:{ fillStyle:'blue' }, maxConnections:-1, connector : "Straight", connectorStyle: { lineWidth:20, strokeStyle:'blue' }, scope:"blueline", dropOptions:{ onDrop:function(e, ui) { alert('drop!'); } } };
Same example again, but for YUI3. Note the drop callback is "drop:hit":
var endpointOptions = { isSource:true, isTarget:true, endpoint: [ "Dot", { radius:30 } ], style:{fillStyle:'blue'}, maxConnections:-1, connector : "Straight", connectorStyle: { lineWidth:20, strokeStyle:'blue' }, scope:"blueline", dropOptions:{ "drop:hit":function(e, ui) { alert('drop!'); } } };
Assign a UUID to the Endpoint options created above, and add as Endpoints to "window1" and "window2":
jsPlumb.addEndpoint("window1", { uuid:"abcdefg" }, endpointOptions ); jsPlumb.addEndpoint("window2", { uuid:"hijklmn" }, endpointOptions );
Connect the two Endpoints we just registered on "window1" and "window2":
jsPlumb.connect({uuids:["abcdefg", "hijklmn"]});
Create a source Endpoint, register it on some element, then make some other element a Connection target:
var sourceEndpoint = { isSource:true, endpoint:[ "Dot", { radius:50 } ] }; var targetEndpoint = { endpoint:[ "Rectangle", { width:10, height:10 } ] }; jsPlumb.addEndpoint( "window1", sourceEndpoint ); jsPlumb.makeTarget( "window2", targetEndpoint );
Notice that the endpoint definition we use on the target window does not include theisTarget:true
directive. jsPlumb ignores that flag when creating a Connection using an element as the target; but if you then tried to drag another connection to the Endpoint that was created, you would not be able to. To permit that, you would setisTarget:true
on the targetEndpoint options defined above.